import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

import { Hero } from './hero/hero';
import { HeroService } from './hero/hero.service';

@Component({
    selector: 'my-hero-detail',
    template: `
        <div *ngIf="hero">
            <h2>{{ hero.name }} details!</h2>
            <div>
                <label for="">id:</label>
                {{ hero.id }}
            </div>
            <div>
                <label for="">name:</label>
                <input type="text" [(ngModel)]="hero.name">
            </div>
            <button (click)="goBack()">Back</button>
        </div>
    `
})
export class HeroDetailComponent implements OnInit{
    hero: Hero;

    constructor(private heroService: HeroService, private router: ActivatedRoute){}
    ngOnInit(){
        this.router.params.forEach((params: Params) => {
            let id = +params['id'];
            this.heroService.getHero(id).then(hero => this.hero = hero);
        });
    }

    goBack(): void {
      window.history.back();
    }
}
